<template>
  <div class="components-container">
    <div style="margin-bottom: 12px;">季度表</div>
    <div class="filter-container">
      <el-date-picker
        v-model="quarterQuery.year"
        type="year"
        size="small"
        value-format="yyyy"
        :clearable="false"
        placeholder="选择年"
        class="filter-item"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="quarterQuery.quarter"
        placeholder="季度"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option value="1" label="Q1季度"></el-option>
        <el-option value="2" label="Q2季度"></el-option>
        <el-option value="3" label="Q3季度"></el-option>
        <el-option value="4" label="Q4季度"></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="quarterQuery.applySource"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="quarterQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="quarterQuery.userType"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in userType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="quarterQuery.strategyVersion"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in strategyVersion"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter('季度')"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset('季度')"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table :data="quarterData" border style="width: 100%">
      <el-table-column
        label="被拒原因代码"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="数量" align="left">
        <el-table-column
          label="当前季度"
          prop="quantityCurrent"
          align="center"
        ></el-table-column>
        <el-table-column
          label="前一季度"
          prop="quantityPrevious"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="百分比" align="left">
        <el-table-column
          label="当前季度"
          prop="rateCurrent"
          align="center"
        ></el-table-column>
        <el-table-column
          label="前一季度"
          prop="ratePrevious"
          align="center"
        ></el-table-column>
      </el-table-column>

      <el-table-column label="+/-" align="left">
        <el-table-column
          label="数量"
          prop="quantityChange"
          align="center"
        ></el-table-column>
        <el-table-column
          label="百分比"
          prop="rateChange"
          align="center"
        ></el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="quarterQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="quarterQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="quarterTotal"
    ></el-pagination>
    <div
      style="margin: 12px 0;border-top: 1px solid #8080804f;padding-top: 12px;"
    >
      月度表
    </div>
    <div class="filter-container">
      <el-date-picker
        v-model="monthQuery.year"
        type="year"
        size="small"
        value-format="yyyy"
        placeholder="选择年"
        :clearable="false"
        class="filter-item"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="monthQuery.month"
        placeholder="月份"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option value="1" label="一月"></el-option>
        <el-option value="2" label="二月"></el-option>
        <el-option value="3" label="三月"></el-option>
        <el-option value="4" label="四月"></el-option>
        <el-option value="5" label="五月"></el-option>
        <el-option value="6" label="六月"></el-option>
        <el-option value="7" label="七月"></el-option>
        <el-option value="8" label="八月"></el-option>
        <el-option value="9" label="九月"></el-option>
        <el-option value="10" label="十月"></el-option>
        <el-option value="11" label="十一月"></el-option>
        <el-option value="12" label="十二月"></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="monthQuery.applySource"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="monthQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="monthQuery.userType"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in userType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="monthQuery.strategyVersion"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in strategyVersion"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter('月')"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset('月')"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table :data="monthData" border style="width: 100%">
      <el-table-column
        label="被拒原因代码"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="数量" align="left">
        <el-table-column
          label="当前月"
          prop="quantityCurrent"
          align="center"
        ></el-table-column>
        <el-table-column
          label="前一月"
          prop="quantityPrevious"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="百分比" align="left">
        <el-table-column
          label="当前月"
          prop="rateCurrent"
          align="center"
        ></el-table-column>
        <el-table-column
          label="前一月"
          prop="ratePrevious"
          align="center"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="+/-" align="left">
        <el-table-column
          label="数量"
          prop="quantityChange"
          align="center"
        ></el-table-column>
        <el-table-column
          label="百分比"
          prop="rateChange"
          align="center"
        ></el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="monthSizeChange"
      @current-change="monthCurrentChange"
      :current-page.sync="monthQuery.page"
      :page-sizes="[10, 20, 50]"
      :page-size="monthQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="monthTotal"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { parseTimeJS as parseTime } from '@/utils' // 时间控件
import {
  getApply,
  getProducts,
  getUserTypes,
  getStrategyVersions
} from '@/api/risksystem/riskMarket/search.ts'
import {
  creditQuarter,
  creditMonth
} from '@/api/risksystem/riskMarket/refuseAnalysis.ts'
const defaultQuery = {
  applySource: '',
  product: '',
  userType: '',
  strategyVersion: ''
}
const quarter = {
  year: String(new Date().getFullYear()),
  quarter:
    new Date().getMonth() + 1 <= 3
      ? '1'
      : new Date().getMonth() + 1 > 3 && new Date().getMonth() + 1 <= 6
      ? '2'
      : new Date().getMonth() + 1 > 6 && new Date().getMonth() + 1 <= 9
      ? '3'
      : '4',
  limit: 10,
  page: 1
}
const month = {
  year: String(new Date().getFullYear()),
  month: String(new Date().getMonth() + 1),
  limit: 10,
  page: 1
}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private quarterTotal = 0
  private monthTotal = 0
  private quarterQuery: any = Object.assign({}, defaultQuery, quarter)
  private monthQuery: any = Object.assign({}, defaultQuery, month)
  private productName = [] //产品名
  private applySource = [] //渠道
  private userType = [] //客群
  private strategyVersion = [] // 版本

  private quarterData = [] //季度
  private monthData = [] // 月
  created() {
    this.getApplylist()
    this.getQuarterList()
    this.getMonthList()
    this.getProducts()
    this.getUserTypes()
    this.getStrategyVersions()
  }
  mounted() {
    // this.getApply()
  }
  // 搜索数据源获取
  private async getApplylist() {
    const res = await getApply()
    this.applySource = res.data.applySources
  }
  private async getProducts() {
    const res = await getProducts()
    this.productName = res.data.products
  }
  private async getUserTypes() {
    const res = await getUserTypes()
    this.userType = res.data.userTypes
  }
  private async getStrategyVersions() {
    const res = await getStrategyVersions()
    this.strategyVersion = res.data.strategyVersions
  }
  // 表格内容获取
  private async getQuarterList() {
    const { data } = await creditQuarter({ search: this.quarterQuery })
    this.quarterData = data.rows
  }
  private async getMonthList() {
    const { data } = await creditMonth({ search: this.monthQuery })
    this.monthData = data.rows
  }
  // 查询、重置
  private handleFilter(val: string) {
    this.quarterQuery.current_page = 1
    if (val === '月') {
      if (this.monthQuery.year === null) {
        this.$message.error('月度表年份条件必须！')
        return false
      }
      if (this.monthQuery.month === '') {
        this.$message.error('月度表月份条件必须！')
        return false
      }
      this.getMonthList()
    } else {
      if (this.quarterQuery.year === null) {
        this.$message.error('季度表年份条件必须！')
        return false
      }
      if (this.quarterQuery.quarter === '') {
        this.$message.error('季度表季度条件必须！')
        return false
      }
      this.getQuarterList()
    }
  }
  private handleReset(val: string) {
    if (val === '季度') {
      this.quarterQuery = Object.assign({}, defaultQuery, quarter)
    } else {
      this.monthQuery = Object.assign({}, defaultQuery, month)
    }
  }
  private handleSizeChange(val: any) {
    this.quarterQuery.limit = val
    this.getQuarterList()
  }
  private handleCurrentChange(val: any) {
    this.quarterQuery.page = val
    this.getQuarterList()
  }
  private monthSizeChange(val: any) {
    this.monthQuery.limit = val
    this.getMonthList()
  }
  private monthCurrentChange(val: any) {
    this.monthQuery.page = val
    this.getMonthList()
  }
  private downloand() {
    console.log('下载')
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
